<template>
  <el-dialog
    :visible.sync="visible"
    width="80%"
    @close="$emit('close')"
    append-to-body
    modal-append-to-body
    :modal="true"
    :lock-scroll="true"
    custom-class="custom-dialog"
    modal-class="custom-modal"
    :center="true"
    :close-on-click-modal="true"
  >
    <div ref="chart" style="width: 100%; height: 960px;"></div>
    <el-dialog
      :visible.sync="studentDialogVisible"
      width="90%"
      append-to-body
      modal-append-to-body
      :modal="true"
      :lock-scroll="true"
      custom-class="student-dialog"
      :center="true"
      :close-on-click-modal="true"
    >
      <div class="alert-body">
        <div class="alert-box">
          <div class="alert-box-header">
            <span>{{ selectedStudents.length }}人</span>
            <span class="iconfont iconguanbi" @click="closeStudentDialog"></span>
          </div>
          <div class="alert-box-body">
            <div class="teacher-content">
              <div class="teacher-content-list" v-for="(student, index) in selectedStudents" :key="index">
                <div class="teacher-content-list-img">
                  <img :src="student.pic" alt="">
                </div>
                <span class="teacher-content-list-name overflow-01">{{ student.name }}</span>
              </div>
            </div>
          </div>
          <div class="alert-box-footer">
            <span @click="closeStudentDialog">返回</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    normalizedData: {
      type: Object, // 根据实际数据结构调整
      required: true
    }
  },
  data() {
    return {
      chartInstance: null,
      studentDialogVisible: false,
      selectedStudents: []
    };
  },
  watch: {
    normalizedData(newData) {
      if (newData && this.chartInstance) {
        if (newData.code === 0) {
          this.updateChart(newData);
        }
      }
    },
    visible(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.initChart(this.normalizedData);
        });
      } else {
        if (this.chartInstance) {
          this.chartInstance.dispose();
          this.chartInstance = null;
        }
      }
    }
  },
  methods: {
    initChart(rawData) {
      console.log('Data:', rawData);
      const { cornerName, categories, seriesData, studentMap } = this.processData(rawData);
      console.log('studentMap Data:', studentMap);
      this.chartInstance = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: cornerName,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            let tooltipHtml = '';
            params.forEach(param => {
              tooltipHtml += `<div>${param.seriesName}: ${param.value}</div>`;
            });
            return tooltipHtml;
          }
        },
        legend: {
          data: Object.keys(seriesData)
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: categories
        },
        yAxis: {
          type: 'value'
        },
        series: Object.entries(seriesData).map(([name, data]) => ({
          name,
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
            position: 'inside',
            formatter: (params) => {
              return params.value > 0 ? params.value : '';
            }
          },
          data
        }))
      };

      this.chartInstance.setOption(option);
      this.chartInstance.on('click', (params) => {
        console.log('Clicked bar:', params);
        const studentList = studentMap[params.seriesName][params.dataIndex];
        if (studentList) {
          this.selectedStudents = studentList;
          this.studentDialogVisible = true;
        }
      });
    },
    updateChart(rawData) {
      const { categories, seriesData } = this.processData(rawData);

      const option = {
        xAxis: {
          data: categories
        },
        series: Object.entries(seriesData).map(([name, data]) => ({
          name,
          data
        }))
      };
      this.chartInstance.setOption(option);
    },
    processData(rawData) {
      const cornerName = rawData.data.corner_name;
      const itemsData = rawData.data.items_data;
      const categories = itemsData.map(item => item.items_title);
      const seriesData = {};
      const studentMap = {};

      itemsData.forEach((item, index) => {
        item.assess_list.forEach(assess => {
          if (!seriesData[assess.name]) {
            seriesData[assess.name] = [];
            studentMap[assess.name] = [];
          }
          seriesData[assess.name].push(assess.evaluate_count);
          studentMap[assess.name].push(assess.students)
        });
      });
      console.log('seriesData', seriesData)
      return { cornerName, categories, seriesData, studentMap };
    },
    closeStudentDialog() {
      this.studentDialogVisible = false;
    }
  }
};
</script>

<style scoped>
.parent-container {
  overflow: visible;
}
.custom-dialog {
  z-index: 3000 !important; /* 确保 z-index 大于遮罩层 */
}

.custom-modal {
  z-index: 2999 !important; /* 确保遮罩层的 z-index 小于弹窗 */
}

.student-dialog {
  text-align: center;
  width: 90%;
  margin: 0 auto;
  background: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-body {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-box {
  width: 85%;
  height: 80%;
  border: 1px solid #005da6;
  background: rgba(13, 17, 44, .8);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
}

.alert-box-header {
  height: 60px;
  display: flex;
  color: #beebfe;
  font-size: 26px;
  padding: 0 20px;
  line-height: 60px;
}

.alert-box-header .iconfont {
  font-size: 26px;
  cursor: pointer;
  margin-left: 20px;
  padding: 0 10px;
}

.alert-box-header span:first-child {
  flex: 1;
}

.alert-box-footer {
  height: 60px;
}

.alert-box-body {
  flex: 1;
  padding: 0 10px;
  overflow-y: auto;
}

.alert-box-list-in i {
  color: #02d5ff;
  font-style: normal;
  font-size: 20px;
  font-weight: bold;
}

.alert-box-list-in em {
  font-style: normal;
}

.alert-box-footer {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-box-footer span {
  display: block;
  border: 1px solid #beebfe;
  color: #beebfe;
  width: 120px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  border-radius: 3px;
  cursor: pointer;
}

.alert-box-footer span:first-child {
  margin-right: 20px;
}

.alert-box-footer span:hover {
  background: rgba(0, 73, 85, 0.6);
}

.teacher-content-list {
  float: left;
  background: rgba(255, 255, 255, .2);
  padding: 10px;
  border-radius: 10px;
  margin-right: 15px;
  margin-bottom: 15px;
  box-shadow: 0 0 2px #000;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.teacher-content-list-img {
  width: 195px;
  height: 250px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.teacher-content-list-img img {
  width: 195px;
  height: 250px;
  display: block;
  border-radius: 5px;
}

.teacher-content-list-name {
  text-align: center;
  font-size: 22px;
  display: block;
  color: #fff;
  font-weight: bold;
  width: 166px;
}

.overflow-01 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.teacher-content-list:hover {
  box-shadow: 0 1px 8px #7c5d00;
}
</style>
